<template>
    <div class="content">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
            <el-form-item label="关键词" prop="keyword">
                <el-input style="width:300px" v-model="queryParams.keyword" placeholder="请输入关键词" clearable />
            </el-form-item>
            <el-form-item label="报告时间">
                <el-form-item label-width="0px">
                    <el-date-picker style="width:140px" v-model="queryParams.startTime" type="date" placeholder="开始时间"
                        value-format="YYYY-MM-DD" :disabled-date="startDisableDate"/>
                </el-form-item>
                <span class="spanStyle">至</span>
                <el-form-item>
                    <el-date-picker style="width:140px" v-model="queryParams.endTime" type="date" placeholder="结束时间"
                        value-format="YYYY-MM-DD" :disabled-date="endDisableDate"/>
                </el-form-item>
            </el-form-item>
            <el-form-item label="报告名称" prop="achievementName">
                <el-input style="width:300px" v-model="queryParams.achievementName" placeholder="请输入名称" clearable />
            </el-form-item>
            <el-row>
              <el-col style="text-align: center">
                <el-form-item>
                  <el-button type="primary" @click="handleQuery">搜索</el-button>
                  <el-button type="primary" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>

        <el-table v-loading="loading" ref="tableRef" :data="dataList" stripe 
            row-key="id" style="margin-top: 12px;">
            <el-table-column label="序号" align="center" width="60">
                <template #default="scope">
                    <span>{{ (queryParams.page - 1) * queryParams.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="报表名称" align="center" prop="achievementName" show-overflow-tooltip />
            <el-table-column label="发震日期" align="center" prop="shockTime" />
            <el-table-column label="发布日期" align="center" prop="achievementDate" />
            <el-table-column label="关键词" align="center" prop="keyword" show-overflow-tooltip />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="text" @click="toView(scope.row)" v-if="!scope.row.attachName.includes('.xls')">预览</el-button>
                    <!-- <el-button type="text" v-if="!scope.row.attachName.includes('.xls')">
                        <router-link target="_blank" :to="{ path: '/viewItemFile', query: { id: scope.row.achievementUpload, name: scope.row.attachName, } }">预览</router-link>
                    </el-button> -->
                    <el-button type="text" @click="handleDown(scope.row)">下载</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="getList" />
    </div>
</template>
  
<script setup name="investigationReportAndDeathCauses">
import { getAllList, detail } from '@/api/informationResult/evaluationReport/earthDamageLossPreEvaluation';
import routerListStore from "@/store/modules/routerList";
import {checkPermi} from "@/utils/permissionBtn"
import {useWebsocket} from "@/utils/socket"
const router = useRouter();
const route = useRoute();

const routerList = routerListStore();
const routerName = computed(() => routerList.routerName);
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=";

const loading = ref(false);
const dataList = ref([]);
const total = ref(0);

const data = reactive({
    queryParams: {
        page: 1,
        rows: 10,
        keyword: undefined,
        startTime: undefined,
        endTime: undefined,
        achievementName: undefined,
        achievementColumn: '地震现场人员伤亡分布及致死原因调查报表',
        releaseStatus:0,
    },
    form: {
    },
})
const { queryParams, form, } = toRefs(data);

const toView = (item) =>{
    let flag = true;
    flag = checkPermi(item.dataOrigin,'look',item.achievementName,'评估报表')
    if(!flag){
      proxy.$modal.msgWarning("暂无权限查看");
      return;
    }
    const routeUrl = router.resolve({
        path: "/viewItemFile",
        query: { id: item.achievementUpload, name: item.attachName,  },
      });
      window.open(routeUrl.href, "_blank");
}

// 下载文件
function handleDown(item) {
    let flag = true;
    flag = checkPermi(item.dataOrigin,'dowon',item.achievementName,'评估报表')
    if(!flag){
      proxy.$modal.msgWarning("暂无权限下载");
      return;
    }
    var query = {
        attachId: item.achievementUpload,
        name: item.attachName,
    }
    location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.page = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    queryParams.value.startTime = undefined;
    queryParams.value.endTime = undefined;
    handleQuery();
}

// 时间可选范围控制
const startDisableDate = (time) => {
	let endDateVal = queryParams.value.endTime;
	if (endDateVal) {
		return time.getTime() > new Date(endDateVal).getTime();
	}
};
const endDisableDate = (time) => {
	let beginDateVal = queryParams.value.startTime;;
	if (beginDateVal) {
		return time.getTime() < new Date(beginDateVal).getTime();
	}
};

/** 查询数据列表 */
function getList() {
    loading.value = true;
    getAllList({ ...queryParams.value }).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        dataList.value.forEach(item=>{
            if(item.achievementName.includes('.doc')||item.achievementName.includes('.xls')||item.achievementName.includes('.pdf')){
                item.achievementName = item.achievementName.split('.')[0]
            }
        })
        total.value = response.data.total;
        loading.value = false;
    });
}
// WebSocket
const ws = useWebsocket()
ws.onmessage = (e) => {
    if(JSON.parse(e.data).moduleType=='infAchievement'){
        getAllList({ ...queryParams.value }).then(response => {
            dataList.value = response.data.rows ? response.data.rows : [];
            dataList.value.forEach(item=>{
                if(item.achievementName.includes('.doc')||item.achievementName.includes('.xls')||item.achievementName.includes('.pdf')){
                    item.achievementName = item.achievementName.split('.')[0]
                }
            })
            total.value = response.data.total;
        });
    }
  };

//页面卸载，关闭socket
onUnmounted(() => {
  ws.close();
});
getList();
</script>
  
<style scoped lang="scss">
.content{
    margin-top: 20px;
}
.el-form--inline .el-form-item {
    margin-right: 0px !important;
}

.spanStyle {
    display: inline-block;
    width: 20px;
    text-align: center;
}

.img {
    width: 280px;
    height: 200px;
    box-sizing: border-box;
}

.lhStyle {
    display: block;
    font-size: 16px;
    padding-top: 5px;
    overflow: hidden; // 溢出隐藏
    text-overflow: ellipsis; // 溢出用省略号显示
    white-space: nowrap; // 规定段落中的文本不进行换行
}

.listStyle {
    height: calc(100% - 60px);
    display: flex; //把盒子在一行显示
    flex-wrap: wrap; //超出自动换行

    .divStyle {
        margin: 10px 20px;
        display: flex;
        flex-direction: column;
        position: relative;
        .dwBtn {
            position: absolute;
            right: 30px;
            top: 168px;
        }
    }
}
.el-table{
margin-bottom: 20px;
}
</style>
  
  